<template>
  <view class="payment-container">
    <view class="footer">
      <view class="price-content">
        <text style="color:#972026;font-size:32rpx;font-weight: bold;"
          >¥ {{totalPrice}}<text
            style="text-decoration: line-through;color:#6e6e6e;font-size:22rpx;margin-left:10rpx"
            >原价¥59.9</text
          ></text
        >
        <!-- <text style="color:#6e6e6e;font-size:22rpx">已使用10.00元优惠卷</text> -->
      </view>

      <view class="pay-btn" @click="handlePay">立即购买</view>
    </view>
  </view>
</template>

<script>
import { mapState,mapActions } from "vuex";
export default {
  data() {
    return {
      orderId: null,
    };
  },
  onBackPress(options) {
    console.log(options);

    uni.redirectTo({
      url: `/pages/checkCredit/resetPay?orderId=${this.orderId}`,
      success: function(res) {
        console.log("res", res);
      },
    });
  },
  computed:{
    ...mapState("Public", ["totalPrice"])
  },
  methods: {
    ...mapActions("order", ["goPrePay"]),
    ...mapActions("Public", ["putPint"]),
    handlePay() {
      this.putPint()
      this.goPrePay(this.orderId);
    },
  },
  onLoad: function(option) {
    this.orderId = option.orderId;

    // 支付宝小程序不支持暂时注释
    // #ifndef MP-WEIXIN
    // const eventChannel = this.getOpenerEventChannel();
    // #endif
    // eventChannel.on("acceptBackUrl", function(url) {
    //   console.log(1, url);
    // });
  },
  onShow() {
    // my.hideBackHome
  },
};
</script>

<style lang="scss" scoped>
.payment-container {
  width: 100%;
  height: calc(100vh - 128rpx);
  background-image: url("https://cdn.joker88.cn/WX20211027-121553%40eee.png");
  background-size: 100%, 100%;
  & .footer {
    position: fixed;
    bottom: 0;
    height: 128rpx;
    width: 100%;
    background-color: white;
    display: flex;
    flex-flow: row nowrap;
    & .price-content {
      flex: 1 0 auto;
      height: 128rpx;
      display: flex;
      flex-flow: column;
      justify-content: center;
      padding-left: 50rpx;
    }

    & .pay-btn {
      flex: 0 0 auto;
      height: 128rpx;
      line-height: 128rpx;
      text-align: center;
      padding: 0 60rpx;
      background-color: #ffb62e;
      color: #972026;
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}
</style>
